<template>
  <view class="page">
    <!-- #ifdef MP-WEIXIN-->
    <view class="head"><text @click="submit">提交</text></view>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN-->
    <my-navbar
      leftText="意见反馈"
      @leftClick="back"
      :background="'#ffffff'"
    ></my-navbar>
    <!-- @rightClick="submit"
      rightText="提交"
      rightColor="#0eaa78" -->
    <!-- #endif -->
    <view class="content">
      <span class="content-title">反馈类型</span>
      <div class="btnList">
        <div
          class="btn"
          v-for="(item, index) in feedbackType"
          :key="index"
          @click="change(item)"
          :class="selectActive == item ? 'selectBtn' : ''"
        >
          {{ item }}
        </div>
      </div>
    </view>

    <view class="content">
      <span class="content-title">备注说明</span>
      <textarea
        class="textarea"
        @input="inputAction"
        :placeholder="place"
        placeholder-style="color:#999"
        auto-height
      ></textarea>
      <u-upload
        class="upload"
        ref="upload"
        :action="action"
        max-size="2097152"
        max-count="3"
        :auto-upload="true"
        :header="header"
        :form-data="{ type: 1 }"
        name="img"
        @on-success="uploadimg"
        @on-remove="removeimg"
      ></u-upload>
      <input
        class="uni-input"
        maxlength="11"
        type="number"
        v-model="phone"
        placeholder="请输入手机号"
      />
    </view>

    <div class="btnBox">
      <div class="btnBox-left btn" @click="submit">提交反馈</div>
      <!-- <div class="btnBox-right btn" @click="back">返回首页</div> -->
    </div>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      header: "",
      value: "",
      place:
        "我们想听听你的心声，如果愿意，你可以给我们留下联系方式和意见反馈，我们期待与你的真诚沟通！",
      action: "",
      imgList: [],
      phone: null,

      feedbackType: ["态度问题", "场地问题", "联系问题", "其他问题"],
      selectActive: null,
    };
  },
  onReady() {
    getApp().setTitle();
  },
  onLoad() {
    this.header = {
      Authorization: uni.getStorageSync("copartner_token"),
    };
    //上传地址
    this.action = `${getApp().globalData.rootUrl}/partner/uploadFeedImg`;
  },
  methods: {
    inputAction(e) {
      this.value = e.detail.value;
    },
    uploadimg(opa) {
      this.err = opa;
      this.imgList.push(opa.data.img_path);
    },
    removeimg(index) {
      this.imgList.splice(index, 1);
    },
    submit() {
      let list = ["反馈类型", "反馈内容", "反馈图片", "联系电话"];
      let lists = ["selectActive", "value", "imgList", "phone"];
      try {
        list.forEach((item, index) => {
          lists.forEach((items, indexs) => {
            if (items != "imgList") {
              if (!this[items]) {
                throw `请填写${list[indexs]}`;
              }
            } else {
              if (this[items].length == 0) {
                throw `请上传${list[indexs]}`;
              }
            }
          });
        });
      } catch (error) {
        uni.showToast({
          title: error,
          icon: "error",
          duration: 2000,
        });
        return;
      }
      let status = this.checkModbile(this.phone);
      if (!status) {
        uni.showToast({
          title: "手机号填写有误!",
          icon: "error",
          duration: 2000,
        });
        return;
      }
      var params = {
        content: this.value,
        feedback_type: this.selectActive,
        phone: this.phone,
        img_arr: this.imgList,
      };
      if (this.imgList.length > 0) {
        Object.assign(params, { img_arr: this.imgList });
      }
      $https("POST", "supplyFeedback", params, (res) => {
        if (res.data.errcode == 0) {
          uni.showToast({
            title: "提交成功",
            icon: "none",
            success() {
              setTimeout(function () {
                // #ifdef H5
                window.history.back(-1);
                // #endif
                // #ifndef H5
                uni.navigateBack();
                // #endif
              }, 2000);
            },
          });
        } else {
          uni.showToast({
            title: res.data.errmsg,
          });
        }
      });
    },
    //JS使用正则表达式校验电话号码
    checkModbile(mobile) {
      var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
      var result = re.test(mobile);
      if (!result) {
        return false; //若手机号码格式不正确则返回false
      }
      return true;
    },

    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
    change(item) {
      this.selectActive = item;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .head {
    height: 88rpx;
    width: 100%;
    padding: 0 30rpx;
    color: #4fa388;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .content {
    background: #fff;
    margin-bottom: 20rpx;
    padding-bottom: 22rpx;
    &-title {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #262626;
      padding: 30rpx 30rpx 19rpx 30rpx;
      border-bottom: 1rpx solid #f2f3f7;
      display: block;
    }
    .textarea {
      font-size: 28rpx;
      color: #333333;
      background: #fff;
      padding: 10rpx;
      box-sizing: border-box;
      width: 100%;
      min-height: 300rpx;
      padding: 35rpx 30rpx 30rpx 30rpx;
    }
    .upload {
      padding: 0rpx 30rpx 30rpx 30rpx;
    }
    .btnList {
      padding: 40rpx 32rpx;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 60rpx);
      grid-gap: 45rpx 30rpx;
      .btn {
        line-height: 60rpx;
        text-align: center;
        background: #ffffff;
        border: 1rpx solid #dcdcdc;
        border-radius: 5rpx;
        color: #666666;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        border-radius: 5px;
      }
      .selectBtn {
        border: 1px solid #40ae36 !important;
        color: #40ae36 !important;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          right: 0;
          top: 0;
          background-image: url("../../static/images/select.png");
          width: 49rpx;
          height: 34rpx;
          background-size: 100% 100%;
          display: block;
        }
      }
    }
    .uni-input {
      width: 644rpx;
      margin: 0 auto;
      background: #ffffff;
      border: 1rpx solid #dcdcdc;
      border-radius: 5rpx;
      padding: 19rpx 22rpx;

      /deep/.input-placeholder {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }
    }
    /deep/.u-list-item {
      border: 4rpx dashed #e3e3e3;
    }
  }
  .btnBox {
    width: 750rpx;
    height: 70rpx;
    margin-top: 37rpx;
    display: flex;
    flex-direction: row;
    // #ifdef MP-WEIXIN
    justify-content: center;
    // #endif
    // #ifdef H5 || APP-PLUS
    justify-content: space-evenly;
    // #endif

    .btn {
      width: 306rpx;
      height: 70rpx;
      line-height: 70rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      text-align: center;
      border-radius: 5rpx;
    }
    &-left {
      background: #40ae36;
      color: #ffffff;
    }
    &-right {
      border: 1rpx solid #40ae36;
      color: #40ae36;
    }
  }
}
</style>